<template>
  <div class="empty-box">
      <img :src="isHttp()?imgSrc:getUrl()" :style="{width:imgWidth}">
      <div class="empty-text" :class="[textClass]" :style="{'margin-top':marginTop,'font-size':fontSize}" v-if="getText">{{getText}}</div>
      <slot></slot>
    </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  computed,
  getCurrentInstance
} from 'vue' 

import { useRouter } from "vue-router"
import { isMobileFun } from '@/utils/util'
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  size:{
    type:[Number,String],
  },
  textSize:{
    type:String,
  },
  textClass:{
    type:String
  },
  text:{
    type:String,
    default:""
  },
  imgSrc:{
    type:String,
    default:"@/assets/images/common/empty.png"
  },
  textMarginTop:{
    type:String,
    default:'.75rem'
  },
})

const showImg = ref(null)

const getText = computed(()=>{
  return props.text || $t('message.empty.nullData')
})
const imgWidth = computed(()=>{
  if(isMobileFun()){
    if(props.size){
      let newSize = parseFloat(props.size)
      return newSize/document.documentElement.style.fontSize+'rem'
    }else{
      return '14.0625rem'
    }
  }else{
    if(props.size){
      if(typeof props.size=='number'){
        return props.size+'px'
      }else{
        return props.size
      }
    }else{
      return '225px'
    }
  }
})
const fontSize = computed(()=>{
  if(isMobileFun()){
    if(props.textSize){
      let newSize = parseFloat(props.textSize)
      return newSize/document.documentElement.style.fontSize+'rem'
    }else{
      return '1rem'
    }
  }else{
    if(props.textSize){
      if(typeof props.textSize=='number'){
        return props.textSize+'px'
      }else{
        return props.textSize
      }
    }else{
      return '16px'
    }
  }
})
const marginTop = computed(()=>{
    if(isMobileFun()){
      if(props.textMarginTop){
        let newSize = parseFloat(props.textMarginTop)
        return newSize/document.documentElement.style.fontSize+'rem'
      }else{
        return '0.75rem'
      }
    }else{
      if(props.textMarginTop){
        if(typeof props.textMarginTop=='number'){
          return props.textMarginTop+'px'
        }else{
          return props.textMarginTop
        }
      }else{
        return '12px'
      }
    }
  }
)

function getUrl(){
  let utilFuns = {}
  const files = import.meta.globEager('../../assets/images/common/*.png');
  Object.keys(files).forEach((fileName) => {
      const name = fileName.replace(/\.\/|\.ts/g, '');
      utilFuns[name.replace('..','@/')] = files[fileName].default;
  });
  return  utilFuns[props.imgSrc]
}
function isHttp(){
  return (props.imgSrc.indexOf('https://')!=-1||props.imgSrc.indexOf('http://')!=-1)
}

</script>
<style lang="scss" scoped>
  .empty-box{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px .9375rem;
    width: 100%;
    box-sizing: border-box;
    // img{
    //   width: 14.0625rem;
    // }
    .empty-text{
      color: #3D3D3D;
      text-align: center;
      @include SourceHanSansCN-Medium;
    }
  }
</style>